<template>
  <a-form ref="formRef" @finish="handleSubmit" :rules="rules" :model="formData">
    <a-form-item name="name" label="姓名">
      <a-input v-model:value="formData.name" />
    </a-form-item>
    <a-form-item name="age" label="年龄">
      <a-input-number v-model:value="formData.age" />
    </a-form-item>
    <a-form-item name="age1" label="年龄">
      <a-input v-model:value="formData.age1" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button html-type="submit">提交</a-button>
        <a-button @click="clickSubmit">提交2</a-button>
        <a-button>取消</a-button>
      </a-space>
    </a-form-item>
  </a-form>
  {{ formData }}
</template>
<script setup>
import { ref } from "vue";

const formRef = ref();
const formData = ref({});
const clickSubmit = async () => {
  await formRef.value.validate();
  console.log(formData.value);
};
const handleSubmit = (value) => {
  console.log(value);
};
const rules = {
  name: [
    { required: true, message: "请输入姓名", trigger: ["blur", "change"] },
    // { len: 3, message: "姓名只能为3个字" },
    { max: 3, message: "姓名最多只能为3个字" },
  ],
  age: [
    { required: true, message: "请输入年龄" },
    { type: "integer", message: "年龄必须为数字" },
  ],
  age1: [
    { required: true, message: "请输入年龄" },
    {
      transform(value) {
        return Number(value);
      },
      type: "integer",
      message: "年龄必须为数字",
    },
  ],
};
</script>
<style></style>
